<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <!--    Bootstrap样式-->
    <link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet" type="text/css">
    <!--   本页面布局-->
    <link rel="stylesheet" type="text/css" th:href="@{/css/htmleaf-demo.css}">
    <link th:href="@{/css/signin.css}" rel="stylesheet" type="text/css">
    <!--提示框-->
    <link th:href="@{/Tosatr/toastr.min.css}" rel="stylesheet" type="text/css">
    <!--<link th:href="@{/Semantic-UI-CSS-master/semantic.css}" rel="stylesheet" type="text/css">-->

    <script th:src="@{/js/jquery-3.4.1.min.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/Tosatr/toastr.min.js}" type="text/javascript" charset="utf-8"></script>

    <!--
        <script th:src="@{/Semantic-UI-CSS-master/semantic.js}" type="text/javascript" charset="utf-8"></script>
    -->
    <script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<!--主容器-->

<div class="htmleaf-container">
    <header class="htmleaf-header">
        <h1 th:text="${msg==null?'基于Bootstrap登录':msg}">基于Bootstrap登录</h1>
    </header>
    <div class="signin">
        <!--图标层-->
        <div class="signin-head" style="margin-left: 40px;margin-top: -10px">
            <img
                th:src="@{images/OnlineLogo.png}"
                alt="System Logo"
                width="440px" height="150px">
        </div>
        <!--表单层-->
        <form class="form-horizontal" th:action="@{/toLogin}" method="post" id="formByAjax">
            <div class="form-group" style="margin-top: 10px">
                <label class="col-sm-4 control-label" id="usernameAjaxBack">
                    <span>用户名：</span>
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
                <!--前缀嵌入图标-->
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="gtonName" placeholder="邮箱/电话号码" name="username">
                </div>
                <div class="col-sm-2">
                </div>
            </div>
            <div class="form-group" style="margin-top: 10px">
                <label class="col-sm-4 control-label">
                    <span>密&nbsp;&nbsp;&nbsp;码：</span>
                    <span id="eyesOnclik" class="glyphicon glyphicon-eye-close" aria-hidden="true"></span></label>
                <div class="col-sm-6">
                    <input type="password" class="form-control" id="pwd" placeholder="密码" name="password">
                </div>
                <div class="col-sm-2">
                </div>
            </div>
            <div class="form-group" style="margin-top: 10px">
                <label class="col-sm-4 control-label">
                    <span>验证码：</span>
                    <span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
                </label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="re" name="captcha">
                </div>
                <div class="col-sm-4">
                    <img class="verifyImg" src="/captcha" width="120px" height="35px" alt="验证码？？"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <!--springsecurity开启了记住密码-->
                            <input type="checkbox" name="rememberMe"> 记住我
                        </label>
                    </div>
                </div>
            </div>
            <!--登录与注册层-->
            <div class="form-group">
                <div class="btn-group btn-group-justified" role="group"
                     style="width: 450px;margin-left: 25px;margin-top: -10px" aria-label="...">
                    <div class="btn-group" role="group">
                        <button type="submit" class="btn btn-success">立即登录</button>
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-danger" th:onclick="GoToRegister()">还没有账户，前往注册</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Modal模态框注册 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 800px;left: -20%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">用户注册板块</h4>
            </div>
            <div class="modal-body" style="background-color: #31B0D5;">
                <table class="table table-hover">
                    <tr>
                        <td class="active"><!--上传头像-->
                            <img id="headImage" th:src="@{/images/OnlineLogo.png}" alt="头像" width="150px"
                                 height="80px">
                        </td>
                        <td class="success">上传头像</td>
                        <td class="warning">
                            <form th:action="@{/uploadfile}" method="post" enctype="multipart/form-data"
                                  id="uploadForm">
                                <input type="file" name="file" accept="image/*">
                                <br>
                                <input type="button" value="上传" class="btn btn-success" th:onclick="doUpload()">
                            </form>
                        </td>
                        <td class="info" id="errorMsg">感谢您的注册！！</td>
                    </tr>
                </table>
                <form id="userForm" class="form-horizontal" th:action="@{/oss/register/user}" method="post">
                    <!--头像地址-->
                    <div class="form-group" style="display: none">
                        <label for="sendImageUrl" class="col-sm-2 control-label">头像：</label>
                        <div class="col-sm-10">
                            <input id="sendImageUrl" type="text" name="headImage"
                                   value="2020/12/18/862da37c-12d2-410f-8506-b3ed5a9e7685.png">
                        </div>
                    </div>
                    <div class="form-group">
                        <table class="table table-hover">
                            <!--姓名-->
                            <!--性别-->
                            <tr>
                                <td class="success"><label class="control-label">姓名：</label></td>
                                <td class="danger"><input type="text" id="useName" name="useName" class="form-control">
                                </td>
                                <td class="active"><label class="control-label">性别：</label></td>
                                <td class="info"><label class="checkbox-inline">
                                    <input type="radio" id="inlineCheckbox1" value="男" name="sex" checked> 男
                                </label>
                                    <label class="checkbox-inline">
                                        <input type="radio" id="inlineCheckbox2" value="女" name="sex"> 女
                                    </label></td>

                            </tr>
                            <!--电话号码-->
                            <!--年龄-->
                            <tr>
                                <td class="warning"><label for="LoginPassword" class="control-label">电话号码：</label></td>
                                <td class="danger"><input type="text" class="form-control" id="LoginPassword"
                                                          name="telphone"></td>
                                <td class="info"><label for="age" class="control-label">年龄：</label></td>
                                <td class="success"><input type="number" class="form-control" id="age" name="age"></td>
                            </tr>
                            <!--家庭地址-->
                            <!--邮箱-->
                            <tr>
                                <td class="active"><label for="address" class="control-label">家庭地址：</label>
                                </td>
                                <td class="info"><input type="text" class="form-control" id="address" name="address">
                                </td>
                                <td class="danger"><label for="email" class="control-label">邮箱：</label></td>
                                <td class="success"><input type="email" class="form-control inputMailList" id="email"
                                                           name="email"></td>
                            </tr>
                            <!--登录账号密码-->
                            <tr>
                                <td class="warning"><label for="loginName" class="control-label">登录名：</label></td>
                                <td class="danger"><input type="text" class="form-control" id="loginName"
                                                          name="username" placeholder="电话||邮箱"></td>
                                <td class="info"><label for="loginPwd" class="control-label">登录密码：</label></td>
                                <td class="success"><input type="text" class="form-control" id="loginPwd"
                                                           name="password" placeholder="字母+数字"></td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <!--个人描述-->
                                    <div class="form-group">
                                        <label for="descript" class="col-sm-2 control-label">个人描述：</label>
                                        <div class="col-sm-10">
                            <textarea class="form-control" id="descript" name="descript" rows="16"
                                      style="min-width: 90%"></textarea>
                                        </div>
                                    </div>
                                </td>

                            </tr>
                            <!--提交-->
                            <tr style="text-align: center">
                                <td class="success"></td>
                                <td class="warning">
                                    <button type="button" class="btn btn-default" th:onclick="registerInUser()">
                                        (提交)下一步
                                    </button>
                                </td>
                                <td class="danger">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                </td>
                                <td class="info">
                                    <button type="reset" class="btn btn-default">重置</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--提交-->
                </form>
            </div>

        </div>
    </div>

</div>
<script type="text/javascript" th:inline="javascript">
    var contentPath = [[${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/'}]];
    //消息框初始化设置
    toastr.options = {
        closeButton: false,    // 是否显示关闭按钮，（提示框右上角关闭按钮）
        debug: false,   // 是否使用deBug模式
        progressBar: true, // 是否显示进度条，（设置关闭的超时时间进度条）
        positionClass: "toast-top-center", // 设置提示款显示的位置
        onclick: null, // 点击消息框自定义事件
        showDuration: "300", // 显示动画的时间
        hideDuration: "1000", // 消失的动画时间
        timeOut: "2000", // 自动关闭超时时间
        extendedTimeOut: "1000", // 加长展示时间
        showEasing: "swing", // 显示时的动画缓冲方式
        hideEasing: "linear", // 消失时的动画缓冲方式
        showMethod: "fadeIn", // 显示时的动画方式
        hideMethod: "fadeOut" // 消失时的动画方式
    };

    $(function () {
        //鼠标移入验证码：形式变成小手抓
        $('.verifyImg').hover(function () {
            $(this).css("cursor", "pointer");
        });
        //验证码：点击刷新
        $('.verifyImg').click(function (ev) {
            console.log("验证码刷新");
            // 对于src路径来说,
            // 如果访问的是静态资源,那么必须不一致才会发送请求,如果修改的src和上次一样,则不会发送请求
            // 如果访问的是动态资源则都会发送请求
            $('.verifyImg').attr('src', contentPath + `captcha?time=${Math.random() * 10 + 1}`)
        });

        //给眼睛添加聚焦手抓形象
        $('#eyesOnclik').hover(function () {
            $(this).css("cursor", "pointer");
        });
        //切换的眼睛的标志变量：
        var isEyes = false;
        //眼睛：密码显示或者隐藏
        $("#eyesOnclik").click(function (ev) {
            $(this).removeClass();//移出之前的样式
            //添加新的样式
            if (!isEyes) {
                $("#eyesOnclik").attr("class", "glyphicon glyphicon-eye-open");//显示
                $("#pwd").attr("type", "text");
                isEyes = true;
            } else {
                $("#eyesOnclik").attr("class", "glyphicon glyphicon-eye-close");//隐藏
                $("#pwd").attr("type", "password");
                isEyes = false;
            }
        });

        //验证用户名：
        $("#gtonName").blur(function (ev) {
            //正则表达式
            let reg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;//邮箱校验
            let phone = /^1[3456789]\d{9}$/;//前端电话号码校验
            let val = $("#gtonName").val();
            console.log(val);
            if (!reg.test(val)) {
                if (!phone.test(val)) {
                    $(this).next().remove();
                    $(this).after("<span style='background-color: red'> 请输入准确</span>");
                } else {
                    $('#gtonName').next().remove();
                }
            } else {
                $('#gtonName').next().remove();
            }
        })
        //密码：^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$
        $("#pwd").blur(function (ev) {
            //验证密码，不能低于三位，不能只是数字或者字母
            let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,16}$/;
            let val = $("#pwd").val();
            if (val.length <= 3) {
                $(this).next().remove();
                $(this).after("<span style='background-color: red'> 不能低于三位</span>");
            } else {
                if (!reg.test(val)) {
                    $(this).next().remove();
                    $(this).after("<span style='background-color: red'> 必须是字母和数字</span>");
                } else {
                    $(this).next().remove();
                }
            }
        });
    });

    //登录提交
    function GoToRegister() {
        $('#myModal').modal('show');
    }

    //registerInuser：注册提交
    function registerInUser(ev) {
        //ID : 表单 userForm
        let this_data = {
            headImage: $('#sendImageUrl').val(),
            useName: $("#useName").val(),
            sex: $("input[type='radio']:checked").val(),
            telphone: $("#LoginPassword").val(),
            age: $("#age").val(),
            address: $("#address").val(),
            email: $("#email").val(),
            username: $("#loginName").val(),
            password: $("#loginPwd").val(),
            descript: $("#descript").val()
        }
        console.log(this_data);
        let this_url = 'student-user-info/register/user';
        $.ajax({
            //请求方式
            type: "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: contentPath + this_url,
            //数据，json字符串
            data: JSON.stringify(this_data),
            traditional: true,
            //请求成功
            success: function (result) {
                if (result.code == 500) {
                    toastr.error('注册失败！');
                    $('#errorMsg').css('backgroundColor', 'red');
                    $('#errorMsg').text(result.msg);
                    setTimeout(function () {
                        $("#errorMsg").text('感谢您的注册')
                        $('#errorMsg').css('backgroundColor', '');
                    }, 3000);
                } else {
                    //提示成功||三，秒之后关闭
                    toastr.success('注册成功！！(Thank you Register!!)');
                    setTimeout(function () {
                        $('#myModal').modal('hide');
                    }, 2000);

                }
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                toastr.error('请求发送失败！');
                console.log(e.status);
                console.log(e.responseText);
            }
        })
    }

    //文件上传
    function doUpload() {
        let formData = new FormData($("#uploadForm")[0]);
        $.ajax({
            url: contentPath + 'oss/uploadfile',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (returndata) {

                //回显图片
                $('#headImage').attr('src', returndata.data.url);
                //回写地址
                let thisHeadImage = returndata.data.url;
                //https://edu-gt.oss-cn-beijing.aliyuncs.com/2020/12/18/862da37c-12d2-410f-8506-b3ed5a9e7685.png
                let saveUrl = thisHeadImage.substring(43);
                $('#sendImageUrl').val(saveUrl);

                //console.log($('#sendImageUrl').val());
            },
            error: function (returndata) {
                alert(returndata);
            }
        });
    }
</script>
</body>
</html>